<template>

    <div class="page-box">
       <div class="page-search">
        <div>
                <label>分类名称</label>
                <el-input v-model="searchForm.ItemTypeName" style="width: 160px;"></el-input>
            </div>
            <div>
                <label>产品/物料</label>
                <el-select v-model="searchForm.ItemOrProduct" placeholder="请选择产品/物料">
                    <el-option label="全部" value=""></el-option>
                    <el-option label="产品" value="产品"></el-option>
                    <el-option label="物料" value="物料"></el-option>
                </el-select>
            </div>

            <div>
                <label>是否启用</label>
                <el-select v-model="searchForm.EnableFlag" placeholder="请选择是否启用">
                    <el-option label="是" value="Y"></el-option>
                    <el-option label="否" value="N"></el-option>
                </el-select>
            </div>
            <div>
                <el-button type="primary" @click="search">查询</el-button>
                <el-button @click="reset">重置</el-button>
            </div>
       </div> 

       <div class="page-section">
            <!--数据表格-->
            <el-table :data="tableData" row-key="Id" default-expand-all :tree-props="{children: 'children', hasChildren: 'hasChildren'}" 
            ref="dataForm" v-loading="isLoading" height="360">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column fixed prop="ItemTypeName" label="分类名称" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="ItemOrProduct" label="物料/产品" :show-overflow-tooltip="true"></el-table-column>

                <el-table-column prop="EnableFlag" label="是否启用" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <el-tag type="success" v-if="scope.row.EnableFlag == 'Y'">是</el-tag>
                        <el-tag type="warning" v-else>否</el-tag>
                    </template>
                </el-table-column>
                
                <el-table-column prop="CreateTime" label="创建时间" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column label="操作" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <el-button type="text" @click="Checked(scope.row)">选择</el-button>
                    </template>
                </el-table-column>
            </el-table>
       </div>

    </div>
    
</template>

<script>
    export default {
data(){
        return {
            //搜索字段
            searchForm:{
                ItemTypeName: '',
                EnableFlag: '',
                ItemOrProduct: ''
            },
            isLoading:false,
            tableData:[]
        }
    },
    mounted(){
        this.dataBind();
    },
    methods:{
        dataBind(){
            this.loading=true;
            this.$http.get('/api/ItemType/GetAll',{
                params:{
                    ItemTypeName: this.searchForm.ItemTypeName,
                    EnableFlag: this.searchForm.EnableFlag,
                    ItemOrProduct: this.searchForm.ItemOrProduct
                }
            })
            .then((res)=>{
                this.tableData=res.Data;
                this.loading=false;
            })
        },
        Checked(model){
            this.$emit('callback',model);
        },
        search(){
            this.dataBind();
        },
        reset(){
            this.searchForm.ItemTypeName="";
            this.searchForm.EnableFlag="";
            this.searchForm.ItemOrproduct="";
        },
    }
}

</script>

<style scoped></style>
